<template>
  <div class="money-pane">
    <div style="display: flex; justify-content: flex-end; align-items: center">
      <div style="margin-right: 12px">已付金额：{{ numberFormat(paymentPaid) }}</div>
      <div>未付金额：{{ numberFormat(paymentUnpaid) }}</div>
      <el-button style="margin-left: 10px" type="primary" icon="Plus" @click="editMode(null)">
        新增
      </el-button>
    </div>
    <div class="tab">
      <div class="z-tab">
        <el-table class="table" :data="moneyData" border style="width: 100%" v-loading="loading">
          <el-table-column
            v-for="item in column"
            :key="item"
            :label="item.label"
            :prop="item.name"
            :width="item.width"
            align="center"
          >
            <template #default="scope">
              <div v-if="item.itemIf">
                {{ numberFormat(scope.row[item.name]) }}
              </div>
              <div v-if="item.type === 'date'">
                {{ scope.row.year }}年 {{ scope.row.month }} 月
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作" width="160px" align="center" fixed="right">
            <template #default="scope">
              <el-button type="primary" icon="Edit" link @click="editMode(scope.row)">
                编辑
              </el-button>
              <el-button type="danger" icon="Delete" link @click="del(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="foot">
        <el-pagination
          v-model:currentPage="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <MoneyUpdataDrawer ref="moneyUpdataRef" @getData="getData"></MoneyUpdataDrawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import {
    postTransactionRecordPageLike,
    deleteTransactionRecordRemoveById,
    getTransactionRecordGetSumBySiteId,
  } from '@/api/controller/transaction-record-controller/index'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import MoneyUpdataDrawer from './components/moneyUpdataDrawer.vue'
  const loading = ref(true)
  const siteId = ref(history.state?.id)
  const column = [
    { name: 'chargePhone', label: '付款人信息', width: 160 },
    { name: 'type', label: '类别', width: 130 },
    { name: 'money', label: '付款金额(元)', width: 130, itemIf: true },
    { name: 'moneyTime', label: '付款时间', width: 130 },
    { name: 'remark', label: '备注' },
  ]

  //获取数据
  const moneyData = ref([])
  onMounted(async () => {
    getData()
  })

  const paymentPaid = ref(0)
  const paymentUnpaid = ref(0)
  const getData = async () => {
    try {
      loading.value = true
      let res = await postTransactionRecordPageLike({
        ...pageInfo.value,
        ...{ siteId: siteId.value },
      })
      moneyData.value = res.data.list
      total.value = res.data.total
      res = await getTransactionRecordGetSumBySiteId({ siteId: siteId.value })
      paymentPaid.value = res.data.paid
      paymentUnpaid.value = res.data.unpaid
    } finally {
      loading.value = false
    }
  }

  //编辑
  const moneyUpdataRef = ref()
  const editMode = (data) => {
    moneyUpdataRef.value.show(data)
  }

  //删除
  const del = (row) => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        let res = await deleteTransactionRecordRemoveById({ id: row.id }, { loading: true })
        if (res.code === 200) {
          pageInfo.value = {
            pageNum: 1,
            pageSize: 10,
          }
          await getData()
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }

  const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const total = ref(0)
  const handleSizeChange = (val) => {
    pageInfo.value = {
      pageNum: 1,
      pageSize: val,
    }
    getData()
  }
  const handleCurrentChange = () => {
    getData()
  }
</script>

<style lang="scss" scoped>
  .money-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0px 20px 0px 10px;
  }
  .tab {
    display: flex;
    flex-direction: column;
    background-color: white;
    flex: 1;
    height: 100%;
    .z-tab {
      position: relative;
      flex: 1;
      height: 100%;
      .table {
        position: absolute;
        height: 100%;
      }
    }
  }
  .foot {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
</style>
